<template>
	<view class="nested-list-component">
		<view>
			<view :id="'module' + index" v-for="(Module, index) in list" :key="index">
				<view class="module-item card">
					<view class="module-head">
						<view class="module-title">{{ Module.name }}</view>
						<view class="">
							<button v-if="[5, 6].includes(parseInt(Module.value))" type="primary" size="mini"
								@click="toMakeImg(Module.value)">去制图</button>
						</view>
					</view>
					<view class="child-list">
						<view class="add-item" @click="toDetail(null, Module)">
							<view class="wrap add">
								<u-icon name="plus" color="#004AA5" size="120"></u-icon>
							</view>
						</view>
						<view class="child-item card" v-for="(item, i) in data[Module.value]" :key="i">
							<view class="wrap">
								<view class="child-head">
									<view class="item-right-btns">
										<text class="icon iconfont" @click="toDetail(item, Module, i)">&#xe643;</text>
										<text class="icon iconfont" v-if="!parseInt(item.stagingStatus)"
											@click="onShowRemove(item, Module, i)">&#xe67e;</text>
									</view>
								</view>
								<view class="child-body">
									<view class="child-title">
										<view class="text">{{ item.title }}</view>
									</view>
									<view class="child-btns">
										<button v-if="[6].includes(parseInt(Module.value))" size="mini"
											@click="preview(item, i, Module)">预览</button>
										<button v-if="!parseInt(item.stagingStatus)" type="primary" size="mini"
											@click="onStaging(item, Module, i)">固证</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal v-model="delObj.show" :content="delObj.content" show-cancel-button @confirm="delConfirm"></u-modal>
	</view>
</template>

<script>
	import {
		getLocalNotice
	} from '@/static/common/js/padLocalFileHandler.js'
	import {
		MODULE_DICTID,
		MODULE_ID,
		STAGING_STATUS
	} from '@/const/modules'
	import {
		removeLocalNoticeItem,
		solidLocalEvidenceItem
	} from '@/static/common/js/padLocalFileHandler.js'

	export default {
		name: 'ScrollingRightList',
		props: {
			list: {
				type: Array,
				required: true
			},
			data: {
				type: Object,
				required: true
			},
			archivesId: {
				type: [String, Number],
				default: ''
			},
		},
		data() {
			return {
				delObj: {
					show: false,
					content: '请再次确认是否删除？',
					moduleId: null,
					moduleName: ''
				},
			}
		},
		computed: {
			currentModule() {
				return (currentDictId) => {
					const currentModule = Object.entries(MODULE_DICTID).find(([key, value]) => value == currentDictId);
					const [moduleName, ] = currentModule;
					const moduleId = MODULE_ID[currentDictId]
					return {
						moduleName,
						moduleId
					}
				}
			}
		},
		methods: {
			async onStaging(item, Module, i) {
				let list = this.data[Module.value];
				let current = list[i]
				if (this.vuex_config.isConnected) {
					const {
						moduleName,
						moduleId
					} = this.currentModule(Module.value)
					// item[moduleId]
					let sendData = {
						dictId: Module.value,
						id: item[moduleId].toString(),
						stagingStatus: STAGING_STATUS.SOLID
					}
					let res = await this.$u.api.record.updateStagingStatus(sendData)
					uni.hideLoading()
					uni.showToast({
						title: res.msg
					})
				} else {
					console.log(item.keyId);
					// return
					await solidLocalEvidenceItem(this.archivesId, Module.value, item.keyId, STAGING_STATUS.SOLID)
				}
				this.$set(current, 'stagingStatus', STAGING_STATUS.SOLID)
				this.$set(this.data, Module.value, list)
			},
			toDetail(item, moduleItem, index = '') {
				let path = '';
				const {
					value,
					noticeId
				} = moduleItem
				switch (parseInt(moduleItem.value)) {
					case 2: // 询问笔录
						path = 'penrecord/index';
						break;
					case 3: // 提取清单
						path = 'inventory/index';
						break;
					case 4: // 勘验笔录
						path = 'inquest/index';
						break;
					case 5: // 现场专业图
						path = 'EvidenceManagement/index'
						break;
					case 6: // 现场草图
						path = 'EvidenceManagement/index'
						break;
					case 10: // 损失清单
						path = 'loss/index';
						break;
					case 11: // 证据材料
						// path = 'evidenceMaterial'
						path = 'EvidenceManagement/index'
						break;
					case 12: // 火灾现场照片
						// path = 'fireScenePhotos';
						path = 'EvidenceManagement/index'
						break;
					case 13: // 视频管理
						// path = 'videoManagement';
						path = 'EvidenceManagement/index';
						break;
					case 14: // 轻微火灾/事故认定书
						path = 'IncidentCertification/index';
						break;
				}
				let printArr = [2, 3, 4, 10, 14]
				const {
					moduleId
				} = this.currentModule(value)
				let url =
					`/pagesH5/${path}?keyId=${item ? item[moduleId] : 0}&dictId=${moduleItem.value}&noticeId=${moduleItem.noticeId}&archivesId=${this.archivesId}&nickName=${this.vuex_user.nickName}&isPrint=${printArr.includes(moduleItem.value)}&userId=${this.vuex_user.userId}`;
				// if (this.vuex_config.isConnected) {
				// 	uni.navigateTo({
				// 		url: url
				// 	});
				// } else {
				console.log(item);
				uni.navigateTo({
					// url: '/pages/common/msgWebview?url=' + encodeURIComponent(url)
					url: `/pagesH5/${path}?isAdd=${item == null}&keyId=${!item ? 0 : item.keyId}&archivesId=${this.archivesId}&noticeId=${moduleItem.noticeId}&dictId=${moduleItem.value}&nickName=${this.vuex_user.nickName}&isPrint=${printArr.includes(moduleItem.value)}`
				});
				// }
			},
			onShowRemove(record, moduleItem, index) {
				if (!record.keyId) {
					record.keyId = index + 1
				}
				console.log(record);
				console.log(moduleItem);
				this.delObj.show = true;
				const {
					moduleName,
					moduleId
				} = this.currentModule(moduleItem.value)
				this.delObj.moduleId = record[moduleId];
				this.delObj.moduleName = moduleName;
				this.delObj.moduleItem = moduleItem;
				this.delObj.record = record;
			},
			async delConfirm() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				const {
					moduleName,
					moduleId,
					moduleItem,
					record
				} = this.delObj
				console.log(this.archivesId);
				console.log(moduleItem.value);
				console.log(record.keyId);
				removeLocalNoticeItem(this.archivesId, moduleItem.value, record.keyId).then(() => {
					this.$emit('getModuleList')
					uni.hideLoading()
					uni.showToast({
						title: '操作成功'
					})
				})
			},
			toMakeImg(dictId) {
				let name = dictId == 5 ? 'com.sensopia.magicplan' : 'com.newskyer.draw';
				// #ifdef APP-PLUS
				const isApp = plus.runtime.isApplicationExist({
					pname: name
				});

				if (isApp) {
					let sendData = {
						email: 'chenlengsu_it@163.com',
						password: 'password',
						mode: 'password'
					};
					plus.runtime.launchApplication({
							// pname: "com.sensopia.magicplan",
							// pname: "com.jideos.jnotes",
							pname: name,
							extra: sendData
						},
						e => {
							console.log('error', e.message);
						}
					);
				} else {
					console.log('App未安装~');
				}
				// #endif
			},
			async preview(item, index, ModuleItem) {
				if (['2', '3', '4', '13'].includes(this.dictId)) {
					// this.addItem(item, index)
					return;
				} else {
					console.log(ModuleItem);
					const dictId = ModuleItem.value
					const {
						moduleName,
						moduleId
					} = this.currentModule(dictId)
					console.log(moduleId);
					console.log(item);
					// if (this.vuex_config.isConnected) {
					// 	console.log(item[moduleId]);
					// 	console.log(moduleName);
					// 	res = await this.$u.api.record.info(item[moduleId], {
					// 		moduleName
					// 	})
					// 	console.log(res);
					// 	fileList = res.data?.fileList
					// } else {
					let res = await getLocalNotice(this.archivesId, ModuleItem.value,
						`${!item ? this.data[ModuleItem.value].length : item.keyId}`)
					let fileList = res?.fileList || []
					// }
					if (!fileList.length) {
						return uni.showToast({
							title: '暂无图片',
							icon: 'none'
						})
					}
					let imgList = fileList.map(img => img?.newUrl || img.url);
					let oldimgList = fileList.map(img => img.url);

					uni.previewImage({
						current: 0,
						urls: imgList,
						indicator: 'default',
						longPressActions: {
							itemList: ['编辑'],
							success: (data) => {
								console.log(data);
								console.log(ModuleItem);
								if (data.tapIndex == 0 && dictId == 6) {
									uni.closePreviewImage({
										success: () => {
											let url =
												`/pagesA/bluetooth/bluetooth?archivesId=${this.archivesId}&keyId=${item.keyId}&imgIndex=${data.index}`
											console.log(url);
											uni.navigateTo({
												url
											});
										},
										complete(e) {
											console.log(e);
										}
									});
								} else {
									uni.showToast({
										title: '该模块暂不支持编辑',
										icon: 'none'
									});
								}
								this.webViewShow = true;
							},
							fail: function(err) {}
						}
					});
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	$childFlexWidth: 415rpx;

	.module-item {
		font-weight: bold;
		background: #fff;
		padding: 0 32rpx;
		margin-bottom: 32rpx;

		.module-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: nowrap;
			padding: 30rpx 0;
			border-bottom: 2rpx solid $u-border-color;

			.module-title {
				color: #333;
				font-size: 36rpx;
				font-weight: bold;
			}

			.module-add {}
		}


		.child-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			gap: 34rpx;
			width: 100%;
			padding: 32rpx 0 42rpx;

			.add-item,
			.child-item {
				height: 266rpx;

				// margin-right: 34rpx;
				.wrap {
					height: 100%;
				}
			}

			.add-item,
			.child-item {
				// flex: 25% 0 0;
				flex: 0 0 calc(25% - 34rpx);
			}

			.child-item {
				padding: 0 5rpx;
				box-shadow: 0px 0px 12px 0px rgba(182, 182, 182, 0.5);

				.wrap {
					position: relative;
					display: flex;
					flex-direction: column;
				}

				.child-head {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					border-bottom: 2rpx solid $u-border-color;
					padding: 16rpx 0;
					padding-right: 26rpx;

					.item-right-btns {
						.icon {
							font-size: 36rpx;
							color: rgba(#000, .85);
						}

						.icon:last-child {
							margin-left: 32rpx;
						}
					}
				}

				.child-body {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					.child-title {
						color: $u-content-color;
						font-size: 28rpx;
						margin-bottom: 28rpx;

						.text {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box; //作为弹性伸缩盒子模型显示。
							-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
							-webkit-line-clamp: 2; //显示的行
						}
					}

					.child-btns {
						button {
							margin: 0 10rpx;
						}
					}

				}


			}

			.add-item {
				background-color: #fafafa;
				border: 2rpx dashed $main-color;
				border-radius: 16rpx;

				.wrap {
					display: flex;
					justify-content: center;
					align-items: center;

					// margin-right: 20rpx;
				}

				&.add {
					height: 100%;
					border: 2upx dashed $u-border-color;
					color: $u-content-color;
					border-radius: 4upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32upx;
				}
			}

		}
	}
</style>